<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Scales</title>
<!--[if IE]><script language="javascript" type="text/javascript" src="front/js/excanvas.js"></script><![endif]--> 
	<script type="text/javascript" src="js/jquery.js"></script>
	<script src="front/js/flot.js" type="text/javascript"></script>
	
 </head> 
    <body> 
<html:form action="maintainVehicleAction" method="post">
	<input type="hidden" name="callMethod" id="callMethod" value="getChartData" />
业绩查看图表&nbsp;&nbsp;&nbsp;<html:select property="userVO.buserid_search"			styleId="userVO.buserid_search">
					<option value="-1">请选择业务员</option>
					<html:options collection="ywyList" labelProperty="username"	property="id"/>
				</html:select>&nbsp;&nbsp;&nbsp;
				<html:select property="userVO.year_search"			styleId="userVO.year_search">
				<html:option value="-1">请选择年份</html:option>
				<html:option value="2011">2011</html:option>
				<html:option value="2012">2012</html:option>
				<html:option value="2013">2013</html:option>
				<html:option value="2014">2014</html:option>
				</html:select>
				<input type="button" onclick="viewYJ();" value="查看"/>
				
 <br><br/>

    <div id="placeholder" style="width:800px;height:300px"></div> 


 </html:form>
 <script language="javascript" type="text/javascript"> 
function viewYJ(){

	if($('#userVO\\.year_search').val()=='-1'){
		alert("请选择年份!");
		return;
	}
	
	document.forms[0].submit();
}

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}


var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {

    if (true) {
        if (item) {
            if (previousPoint != item.datapoint) {
                previousPoint = item.datapoint;
                
                $("#tooltip").remove();
                var x = item.datapoint[0],
                    y = item.datapoint[1];
                
                showTooltip(item.pageX, item.pageY,
                           "在" + x + "月份共完成" + y+"笔业务");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
    if (item) {
        $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
        plot.highlight(item.series, item.datapoint);
    }
});


$(function () {
    var sin = [];
    
    <nested:iterate name="chartMapList" id="chartMap">
    	sin.push(['<nested:write name="chartMap" property="submit_date"/>', '<nested:write name="chartMap" property="count"/>']);;
    </nested:iterate> 
 
    var plot = $.plot($("#placeholder"),[sin],{
        lines: { show: true },
        points: { show: true },
        grid: {hoverable: true},
        yaxis: {
            ticks: 10,
            min: 0,
            max: 100
        },
        xaxis: {
            
            min: 1,
            max: 12
        }});
});
</script> 
 
 </body> 
</html> 


